<template>
  <div class="dictManage_main">
    <div class="sx">

    </div>
    <div class="mx">
      <div class="button">
        <el-button type="primary" @click="openAddDictDialog(null)">新建字典</el-button>
      </div>
      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="dictList" stripe style="width: 100%" height="700px">
          <el-table-column prop="id" label="id" width="100"/>
          <el-table-column prop="label" label="字典名"/>
          <el-table-column prop="value" label="字典值"/>
          <el-table-column prop="createTime" label="创建时间">
            <template #default="scope">
              {{ parseTime(scope.row.createTime, '{y}年{m}月{d}日') }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="400">
            <template #default="scope">
              <el-button type="primary" @click="openChildDist(scope.row.id)">详情</el-button>
              <el-button type="primary" @click="openAddDictDialog(scope.row)">修改</el-button>
              <el-button type="primary" @click="openAddChildDist(scope.row)">增加子项</el-button>
              <el-button type="danger" @click="deleteDict(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <!--新增弹出框-->
    <el-dialog v-model="booleanAddDict" title="新建/修改字典" width="300" style="overflow: hidden">
      <el-form
          :label-position="'right'"
          label-width="auto"
          :model="addDictForm"
          style="max-width: 600px"
      >
        <el-form-item label="字典名">
          <el-input v-model="addDictForm.label"/>
        </el-form-item>
        <el-form-item label="字典值">
          <el-input v-model="addDictForm.value"/>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="float: right" @click="addDict">确定</el-button>
    </el-dialog>
    <!--详情弹出框-->
    <el-dialog v-model="booleanChildDict" title="字典子项" width="700" style="overflow: hidden">
      <el-table :data="childDictList" stripe style="width: 100%" height="600px">
        <el-table-column prop="label" label="字典名"/>
        <el-table-column prop="value" label="字典值"  sortable/>
        <el-table-column prop="createTime" label="创建时间" sortable>
          <template #default="scope">
            {{ parseTime(scope.row.createTime, '{y}年{m}月{d}日') }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" @click="deleteChildDist(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import {parseTime} from "@/tool/utils.js";
import {onMounted, ref} from "vue";
import {addDictApi, deleteDictApi, getAllDictsApi, updateDictApi} from "@/api/dictApi.js";
import {ElMessage} from "element-plus";

const dictList = ref()//字典列表
const childDictList = ref()//字典子项列表
const booleanAddDict = ref(false)//新增弹出框
const addDictForm = ref({})//新增字典表单
const booleanChildDict = ref(false)//子项弹出框

const addOrUpdate = ref(1)//1新建2修改

onMounted(() => {
  initData()
})

function initData() {
  getDict()
}

//获取所有1层字典
function getDict() {
  let data = {level: 1}
  getAllDictsApi(data).then(res => {
    dictList.value = res.data
  })
}

//打开新增字典弹出框
function openAddDictDialog(data) {
  if (data != null) {
    addOrUpdate.value = 2
    addDictForm.value = data
  } else {
    addOrUpdate.value = 1
    addDictForm.value = {}
  }
  booleanAddDict.value = true
  addDictForm.value.level = 1
}

//增加字典请求
function addDict() {
  if (addOrUpdate.value == 1) {
    addDictApi(addDictForm.value).then(res => {
      booleanAddDict.value = false
      ElMessage({message: res.msg, type: 'success'})
      getDict()
    })
  } else {
    updateDictApi(addDictForm.value).then(res => {
      booleanAddDict.value = false
      ElMessage({message: res.msg, type: 'success'})
      getDict()
    })
  }

}

//打开增加子项框
function openAddChildDist(row) {
  booleanAddDict.value = true
  addDictForm.value = {}
  addDictForm.value.parentId = row.id
  addDictForm.value.level = 2
  addOrUpdate.value = 1
}

//打开字典详情对话框
function openChildDist(id) {
  booleanChildDict.value = true
  let data = {id: id}
  getAllDictsApi(data).then(res => {
    childDictList.value = res.data[0].child
  })
}

//删除字典子项
function deleteChildDist(id) {
  let data = {id: id, level: 2}
  deleteDictApi(data).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    openChildDist(childDictList.value[0].parentId)
  })
}

function deleteDict(row) {
  let data = {id: row.id, level: 1}
  deleteDictApi(data).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    getDict()
  })
}
</script>

<style scoped>
.dictManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>